<template>
  <div>
    <div id="cornerComment" v-if="detailVisible">
      <div class="cornerComment-in">
        <div class="cornerComment-in-title">
          <span>按键命令</span>
          <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
        </div>
        <div class="commentBody">
          <el-alert
            title="此操作仅适用于类别属性中开关类型的操作命令"
            type="warning"
            :closable="false">
          </el-alert>
          <el-table :data="rulesList">
            <el-table-column label="属性名" prop="name" align="center"/>
<!--            <el-table-column label="执行命令" prop="command">-->
<!--              <template slot-scope="scope">-->
<!--                {{JSON.stringify(scope.row.command)}}-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column label="操作" prop="roleSort" width="180" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" plain @click="showRuleFn(scope.row)">编辑命令</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="cornerComment-in-footer">
          <el-button size="small" @click="closePOpup">取消</el-button>
        </div>
      </div>
    </div>
    <buttonRuleList :visible.sync="listRulevisible" :cateId="cateId" :commandRow="commandRow" :typeLink="typeLink"></buttonRuleList>
  </div>
</template>

<script>
import {listRules, delRules} from "@/api/system/rules";
import commandBox from '@/components/command'
import buttonRuleList from "./buttonRuleList";

export default {
  props: ['visible', 'optionData', 'cateId', 'typeLink'],
  name: "deviceDetail",
  components: {commandBox, buttonRuleList},
  data() {
    return {
      detailVisible: false,
      rulesList: [],
      showRulevisible: false,
      listRulevisible: false,
      commandIndex: 0,
      commandRow: null
    }
  },
  watch: {
    visible() {
      this.detailVisible = this.visible
      if (!this.visible) {
        this.rulesList = []
      } else {
        console.log('optionData:', this.optionData)
        this.rulesList = [
          {
            name: this.optionData['true'],
            key: 'true',
            command: [],
            sku: this.optionData.name
          },
          {
            name: this.optionData['false'],
            key: 'false',
            command: [],
            sku: this.optionData.name
          }
        ]
      }
    }
  },
  methods: {
    chooseRule(row) {
      this.$emit('getRule', row)
      this.closePOpup()
    },
    closePOpup() {
      this.$emit('update:visible', false)
    },
    showRuleFn(row) {
      this.commandRow = row
      this.listRulevisible = true
    },
    /** delete按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('Are you sure to delete the data item for rule '+row.id+'？').then(function () {
        return delRules(row.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("success");
      }).catch(() => {
      });
    },
    getRule(option) {
      // commandIndex
      let rulesList_ = JSON.parse(JSON.stringify(this.rulesList[this.commandIndex]))
      rulesList_.command.push(JSON.parse(option.commands))
      this.$set(this.rulesList, this.commandIndex, rulesList_)
    },
  }
}
</script>

<style scoped>
.Json-list {
  border: 1px solid #eee;
  padding: 10px;
}

.Json-list-line {
  display: flex;
  align-items: center;
}

.w-150 {
  width: 150px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.cornerComment-in {
  width: 700px;
  height: 57%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.Json-small-list {
  background: #eee;
  padding: 10px;
  margin-top: 10px;
}
</style>
